import 'package:flutter/material.dart';
import 'package:shenling_flutter/utils/auth.dart';
import 'package:shenling_flutter/utils/dio.dart';
import 'package:shenling_flutter/utils/toastMsg.dart';

class Minepage extends StatefulWidget {
  const Minepage({super.key});

  @override
  State<Minepage> createState() => _MinepageState();
}

class _MinepageState extends State<Minepage> {
  //列表信息
  List listInfo = [
    {'title': '车辆信息', 'icon': Icons.chevron_right},
    {'title': '任务数据', 'icon': Icons.chevron_right},
    {'title': '系统设置', 'icon': Icons.chevron_right},
  ];
  //定义数据
  Map userInfo = {
    'avatar': '',
    'name': '',
    'number': '',
    'phone': '',
  };
  //加载
  bool _loading = true;
  //定义一个默认token
  String _token = '';

  @override
  void initState() {
    super.initState();
    final token = Auth().getToken();
    print(token);
    _token = token ?? '';
    if (_token.isNotEmpty) {
      getUserInfo();
    }
  }

//获取用户信息
  getUserInfo() async {
    setState(() {
      _loading = true;
    });
    try {
      final res = await http.request('get', '/driver/users', null, null);
      setState(() {
        userInfo = res['data'];
        _loading = false;
      });
      print(res);
    } catch (e) {
      Toastmsg.showToast(e.toString());
    }
  }

  @override
  Widget build(BuildContext context) {
    return _loading && _token.isNotEmpty
        ? const Center(
            child: CircularProgressIndicator(),
          )
        : Stack(
            children: [
              //红色背景
              SizedBox(
                width: MediaQuery.of(context).size.width,
                child: Image.asset(
                  'assets/imgs/bg_page_my.jpg',
                  fit: BoxFit.cover,
                  height: 300,
                ),
              ),
              Positioned(
                top: 50,
                right: 0,
                left: 0,
                child: //个人信息
                    Column(
                  children: [
                    _token.isEmpty
                        ? Image.asset('assets/imgs/avatar.png')
                        : Image.network(
                            userInfo['avatar'],
                            width: 60,
                            height: 60,
                          ),
                    const SizedBox(
                      height: 5,
                    ),
                    //个人信息
                    _token.isEmpty
                        ? GestureDetector(
                            onTap: () {
                              Navigator.pushNamed(context, '/login');
                            },
                            child: const Text(
                              '去登录',
                              style:
                                  TextStyle(fontSize: 20, color: Colors.white),
                            ),
                          )
                        : Column(
                            children: [
                              Text(
                                userInfo['name'],
                                style: const TextStyle(
                                    color: Colors.white, fontSize: 16),
                              ),
                              const SizedBox(
                                height: 5,
                              ),
                              Text('司机编号:${userInfo['number']}',
                                  style: const TextStyle(
                                    color: Colors.white,
                                  )),
                              const SizedBox(
                                height: 5,
                              ),
                              Text('手机号:${userInfo['phone']}',
                                  style: const TextStyle(
                                    color: Colors.white,
                                  ))
                            ],
                          )
                  ],
                ),
              ),
              Positioned(
                  top: 230,
                  left: 0,
                  right: 0,
                  child: //底部白色卡片
                      Container(
                    width: MediaQuery.of(context).size.width,
                    // height: 200,
                    padding: const EdgeInsets.all(20),
                    margin: const EdgeInsets.only(left: 10, right: 10),
                    decoration: const BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.all(
                          Radius.circular(10),
                        )),
                    child: const Column(
                      children: [
                        Text(
                          '-- 本月任务 --',
                          style: TextStyle(color: Colors.grey, fontSize: 18),
                        ),
                        SizedBox(
                          height: 20,
                        ),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Column(
                              children: [
                                Text(
                                  '18',
                                ),
                                SizedBox(
                                  height: 5,
                                ),
                                Text('任务总量'),
                              ],
                            ),
                            Column(
                              children: [
                                Text('18'),
                                SizedBox(
                                  height: 5,
                                ),
                                Text('完成任务量'),
                              ],
                            ),
                            Column(
                              children: [
                                Text('18'),
                                SizedBox(
                                  height: 5,
                                ),
                                Text('运输里程(km)'),
                              ],
                            )
                          ],
                        )
                      ],
                    ),
                  )),
              //底部列表信息
              Positioned(
                top: 400,
                left: 0,
                right: 0,
                child: Container(
                  margin: const EdgeInsets.only(left: 10, right: 10),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(10),
                  ),
                  child: ListView.separated(
                    shrinkWrap: true,
                    itemCount: listInfo.length,
                    separatorBuilder: (BuildContext context, int index) {
                      return const Divider(
                        height: 1,
                        color: Colors.grey,
                      );
                    },
                    itemBuilder: (BuildContext context, int index) {
                      return Container(
                          padding: const EdgeInsets.all(10),
                          child: GestureDetector(
                            onTap: () {
                              //跳转到系统设置页
                              if (index == 2) {
                                Navigator.pushNamed(context, '/setting');
                              }
                            },
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Text(listInfo[index]['title']),
                                Icon(
                                  listInfo[index]['icon'],
                                )
                              ],
                            ),
                          ));
                    },
                  ),
                ),
              )
            ],
          );
  }
}
